<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>项目管理</title>
    <style>
        .nicescroll-rails.nicescroll-rails-vr{
            background: transparent!important;
            left:2.715rem!important;
        }
    </style>
</head>
<body>
        <div class="right-top-tools" style="height:50px">
            <div class="zd-tab clearfix" style="height:50px">
               <span style="color:#3c619e;font-weight: bold">图表分析 </span>
            </div>
            <div class="chart-tool" style="padding-top:6px; padding-right:20px">
	            <div id="reportrange" class="pull-left">
		            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
		            <span></span> <b class="caret"></b>
		        </div>
		        <div id="search_data" class="search-at">查询</div>
	        </div>
        </div>
		<div class="big-right relative" style="width: 100%;">
	        <div class="right-top-tools"  style="margin-bottom:20px">
	            <div class="data-class-btns clearfix">
	                <div id="tbl_surface_move_device_data" class="class-btn active" station_type="14">
						<div class="icon icon-bg wy">
							<div class="pic"></div>
						</div>
						位移监测
					</div>
					<div id="tbl_deep_move_device_data" class="class-btn" station_type="5">
						<div class="icon icon-bg xz">
							<div class="pic"></div>
						</div>
						深度位移
					</div>
					<div id="tbl_rain_device_data" class="class-btn" station_type="1">
						<div class="icon icon-bg yl">
							<div class="pic"></div>
						</div>
						雨量监测
					</div>
					<div id="tbl_water_device_data" class="class-btn" station_type="2">
						<div class="icon icon-bg ot">
							<div class="pic"></div>
						</div>
						含水率监测
					</div>
					<div id="tbl_pressure_device_data" class="class-btn" station_type="20">
		                <div class="icon icon-bg sy">
		                    <div class="pic"></div>
		                </div>
		 				渗压监测
		            </div>
		            <div id="tbl_flow_device_data" class="class-btn" station_type="200">
		                <div class="icon icon-bg ll">
		                    <div class="pic"></div>
		                </div>
						流水监测
		            </div>
	            </div>
	            <div class="zd-tab clearfix z1">
	            	<div id="devices_tabs">
					</div>
					<div class="draptop"></div>
				</div>
	            <div class="right-top-tools-open">
	            </div>
	        </div>
	        <div class="chart-container clearfix">
	            <div id="zht_chart" class="my-chart">
	            </div>
	      </div>        
    </div>
<script type="text/javascript">
	var dataType = null;
	var device = null;
	var device_name = null;
	var station_type = null;
	var search_start_time = null;
	var search_end_time = null;
	var search_start_data = null;
	var search_end_data = null;
	
    $(".class-btn").click(function(){
    	dataType = this.id;
    	station_type = $(this).attr("station_type");
    	$(".class-btn").removeClass("active");
        $(this).addClass("active");
        device = null;
        loadDevices( dataType );
    });
    
    $(".table-tab").on("click",".tab",function(){
        $(this).addClass("current").siblings(".tab").removeClass("current");
    });
    
    var theight=0;
    $(".draptop").on("click",function(){
        theight=$(".right-top-tools")[0].clientHeight;
        $(".right-top-tools").animate({'height':"0px"});
        setTimeout(function(){
            $(".right-top-tools-open").show();
        },300);
    });
    
    $(".right-top-tools-open").on("click",function(){
        $(".right-top-tools").animate({'height':theight+'px'},300,"linear",function(){
            $(".right-top-tools").css({'height':"auto"});
        });
        $(this).hide();
    });
    
  	//获取表格请求的URL
	function getDatatableListUrl( dataType ){
		if( dataType == "tbl_deep_move_device_data" ){
			return "../../tbl_deep_move_device_data";
		}else if( dataType == "tbl_rain_device_data" ){
			return "../../tbl_rain_device_data";
		}else if( dataType == "tbl_surface_move_device_data" ){
			return "../../tbl_surface_move_device_data";
		}else if( dataType == "tbl_water_device_data" ){
			return "../../tbl_water_device_data";
		}else if( dataType == "tbl_pressure_device_data" ){
			return "../../tbl_pressure_device_data";
		}
	}
  	
	function loadDevices(){
		var param = {};
		param.station_type = station_type;
		param.tree_level = global.device_data_tree_selected_level;
		param.tree_id = global.device_data_tree_selected_id;
		var json_data = JSON.stringify(param);
		var url = "../../tbl_station_info/list";
		$.ajax({
			url: url,
			type : 'post',
		    async : false,
			data: json_data,
			contentType: "application/json; charset=utf-8",
			dataType: "json",
			success: function( json ) {
				var html="";
				if( json.data ){
					$(json.data).each(function(){
						html += "<div class=\"device_tab\" onclick=\"devices_tabClick(this)\" station_name=\""+this.station_name+"\" id=\""+this.station_id+"\">"+this.station_name+"</div>"; 
					});
					html += "<div class=\"draptop\"></div>"; 
					$("#devices_tabs").html(html);
				}
			}
		});
	}
    
    function devices_tabClick(btn){
    	$(".device_tab").removeClass("device_tab_clicked");
        $("#"+btn.id).addClass("device_tab_clicked");
    	device = btn.id;
    	device_name = $(btn).attr("station_name");
    	dataType = $(".class-btn.active").attr("id");
    	showDataChart();
    }
    
    function getChartData( option ){
		var query = {};
		query.device_id = device;
		query.search_start_time = search_start_time;
		query.search_end_time = search_end_time;
		query.pagesize = 100;
		var json_data = JSON.stringify( query );
		var url = getDatatableListUrl( dataType );
		$.ajax({
			  url: url + "/list",
			  type : 'post',
			  async : false,
			  data: json_data,
			  contentType: "application/json; charset=utf-8",
			  dataType: "json",
			  success: function(json) {
				  
				  if( dataType == "tbl_deep_move_device_data" ){
						option.title.text = "深度位移监测数据变化图（"+device_name+"）";
						option.title.subtext = search_start_data + "至" + search_end_data;
						option.xAxis.data = new Array();
						var a_value_array = new Array();
						var b_value_array = new Array();
						var warning_array = new Array();
						if( json.data != null ){
							$(json.data).each( function(){
								option.xAxis.data.push( new Date(this.observe_time).format("yyyy-MM-dd hh:mm:ss") );
								a_value_array.push( this.a_move_value );
								b_value_array.push( this.b_move_value );
								warning_array.push( this.warning_value );
							});
						}						
						option.legend.data =["A轴","B轴","预警值"]
						option.series = new Array();
						
						var item = {};
						item.name = "A轴";
						item.type = "line";
						item.data = a_value_array;
						item.markPoint = {"data":[{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]};
						item.markLine = {"data": [{"type": "average","name": "平均值"}]};
						item.itemStyle = {normal: {color: "#3366cc"}}
						option.series.push(item);
						var item = {};
						item.name = "B轴";
						item.type = "line";
						item.data = b_value_array;
						item.markPoint = {"data":[{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]};
						item.markLine = {"data": [{"type": "average","name": "平均值"}]};
						item.itemStyle = {normal: {color: "#009966"}}
						option.series.push(item);
						var item = {};
						item.name = "预警值";
						item.type = "line";
						item.data = warning_array;
						item.itemStyle = {normal: {color: "#cc0000"}}
						option.series.push(item);
					}else if( dataType == "tbl_rain_device_data" ){
						option.title.text = "雨量监测数据变化图（"+device_name+"）";
						option.title.subtext = search_start_data + "至" + search_end_data;
						option.xAxis.data = new Array();
						var day_rain_value = new Array();
						var total_rain_value = new Array();
						var warning_array = new Array();
						if( json.data != null ){
							$(json.data).each( function(){
								option.xAxis.data.push( new Date(this.observe_time).format("yyyy-MM-dd hh:mm:ss") );
								day_rain_value.push( this.day_rain_value );
								total_rain_value.push( this.total_rain_value );
								warning_array.push( this.warning_value );
							});
						}
						option.legend.data =["日降雨量","总降雨量","预警值"]
						option.series = new Array();
						
						var item = {};
						item.name = "日降雨量";
						item.type = "bar";
						item.data = day_rain_value;
						item.markPoint = {"data":[{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]};
						item.markLine = {"data": [{"type": "average","name": "平均值"}]};
						item.itemStyle = {normal: {color: "#3366cc"}}
						option.series.push(item);
						var item = {};
						item.name = "总降雨量";
						item.type = "bar";
						item.data = total_rain_value;
						item.markPoint = {"data":[{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]};
						item.markLine = {"data": [{"type": "average","name": "平均值"}]};
						item.itemStyle = {normal: {color: "#009966"}}
						option.series.push(item);
						var item = {};
						item.name = "预警值";
						item.type = "bar";
						item.data = warning_array;
						item.itemStyle = {normal: {color: "#cc0000"}}
						option.series.push(item);
					}else if( dataType == "tbl_surface_move_device_data" ){
						option.title.text = "位移监测数据变化图（"+device_name+"）";
						option.title.subtext = search_start_data + "至" + search_end_data;
						option.xAxis.data = new Array();
						var x_move_value = new Array();
						var y_move_value = new Array();
						var z_move_value = new Array();
						if( json.data != null ){
							$(json.data).each( function(){
								option.xAxis.data.push( new Date(this.observe_time).format("yyyy-MM-dd hh:mm:ss") );
								x_move_value.push( this.x_move_value );
								y_move_value.push( this.y_move_value );
								z_move_value.push( this.z_move_value );
							});
						}
						option.legend.data =["X轴","Y轴","Z轴"]
						option.series = new Array();
						
						var item = {};
						item.name = "X轴";
						item.type = "line";
						item.data = x_move_value;
						item.markPoint = {"data":[{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]};
						item.markLine = {"data": [{"type": "average","name": "平均值"}]};
						item.itemStyle = {normal: {color: "#3366cc"}}
						option.series.push(item);
						var item = {};
						item.name = "Y轴";
						item.type = "line";
						item.data = y_move_value;
						item.markPoint = {"data":[{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]};
						item.markLine = {"data": [{"type": "average","name": "平均值"}]};
						item.itemStyle = {normal: {color: "#009966"}}
						option.series.push(item);
						var item = {};
						item.name = "Z轴";
						item.type = "line";
						item.data = z_move_value;
						item.markPoint = {"data":[{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]};
						item.markLine = {"data": [{"type": "average","name": "平均值"}]};
						item.itemStyle = {normal: {color: "#ff9933"}}
						option.series.push(item);
					}else if( dataType == "tbl_water_device_data" ){
						option.title.text = "含水率监测数据变化图（"+device_name+"）";
						option.title.subtext = search_start_data + "至" + search_end_data;
						option.xAxis.data = new Array();
						var water_value = new Array();
						var warning_value = new Array();
						if( json.data != null ){
							$(json.data).each( function(){
								option.xAxis.data.push( new Date(this.observe_time).format("yyyy-MM-dd hh:mm:ss") );
								water_value.push( this.water_value );
								warning_value.push( this.warning_value );
							});
						}						
						option.legend.data =["含水率","预警值"]
						option.series = new Array();
						
						var item = {};
						item.name = "含水率";
						item.type = "line";
						item.data = water_value;
						item.markPoint = {"data":[{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]};
						item.markLine = {"data": [{"type": "average","name": "平均值"}]};
						item.itemStyle = {normal: {color: "#3366cc"}}
						option.series.push(item);
						var item = {};
						item.name = "预警值";
						item.type = "line";
						item.data = warning_value;
						item.itemStyle = {normal: {color: "#cc0000"}}
						option.series.push(item);
						
					}else if( dataType == "tbl_pressure_device_data" ){
						option.title.text = "渗压监测数据变化图（"+device_name+"）";
						option.title.subtext = search_start_data + "至" + search_end_data;
						option.xAxis.data = new Array();
						var kpa_value = new Array();
						if( json.data != null ){
							$(json.data).each( function(){
								option.xAxis.data.push( new Date(this.observe_time).format("yyyy-MM-dd hh:mm:ss") );
								kpa_value.push( this.kpa_value );
							});
						}						
						option.legend.data =["渗压值"]
						option.series = new Array();
						
						var item = {};
						item.name = "渗压值";
						item.type = "line";
						item.data = kpa_value;
						item.markPoint = {"data":[{"type": "max", "name": "最大值"}, {"type": "min", "name": "最小值"}]};
						item.markLine = {"data": [{"type": "average","name": "平均值"}]};
						item.itemStyle = {normal: {color: "#3366cc"}}
						option.series.push(item);				
					}
				    if( myChart == null ){
				    	myChart = echarts.init(document.getElementById('zht_chart'));
				    }
				   
		        	// 使用刚指定的配置项和数据显示图表。
		            myChart.setOption( option, true );
			  }
		});
	}
    
    var myChart = null;// 基于准备好的dom，初始化echarts实例
    function showDataChart(){
    	// 指定图表的配置项和数据
        $.getJSON( "../../json/line_timeData.json", function( json ) {
        	var option = json;
        	//获取数据，组织图表数据
        	getChartData( option );  
        });
    }
    
  //rangedate
    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end) {
    	search_start_data = start.format('YYYY-MM-DD');
    	search_end_data = end.format('YYYY-MM-DD');
    	search_start_time = start.format('YYYY-MM-DD') + " 00:00:00";
    	search_end_time = end.format('YYYY-MM-DD') + " 23:59:59";
        $('#reportrange span').html( start.format('YYYY-MM-DD') + ' 至 ' + end.format('YYYY-MM-DD') );
    }
    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
            '今天': [moment(), moment()],
            '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            '最近一周': [moment().subtract(6, 'days'), moment()],
            '最近30天': [moment().subtract(29, 'days'), moment()],
            '当月': [moment().startOf('month'), moment().endOf('month')],
            '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        },
        locale : {
            applyLabel : '确定',
            cancelLabel : '取消',
            fromLabel : '起始时间',
            toLabel : '结束时间',
            customRangeLabel : '自定义',
            daysOfWeek : [ '日', '一', '二', '三', '四', '五', '六' ],
            monthNames : [ '一月', '二月', '三月', '四月', '五月', '六月',
                '七月', '八月', '九月', '十月', '十一月', '十二月' ],
            firstDay : 1
        }
    }, cb );
    cb( start, end );
</script>
<script type="text/javascript">
    $(document).ready(function(){
    	dataType = $(".class-btn.active").attr("id");
    	station_type = $(".class-btn.active").attr("station_type");
    	
    	loadDevices( dataType );
    	
    	$("#search_data").click(function(){
    		if( device == null ){
    			global.alert( "请选择您要查询数据的设备！" );
    		}else{
    			showDataChart();
    		}
	    });
	});
</script>
</body>
</html>